<template>
    <div class="appTable Backstage">
        <div class="table">
            <div class="mask"></div>
            <div class="table_title">{{ table_title }}管理</div>
            <div class="table_btns" v-if="operate && showAdd">
                <el-button @click="isExpand" type="primary" icon="el-icon-folder-add">全部{{ expand ? '收起' : '展开' }}</el-button>
                <el-button @click="handleAdd('group', 0)" type="primary" icon="el-icon-folder-add">添加集团</el-button>
            </div>
            <div class="table_body">
                <zy-table v-if="show" :expand="expand" :rowKey="'value'" :loading="loading" :tableData="backstageData" :tableColumn="tableColumn" :pageSize="100" :total="0"></zy-table>
            </div>
            <zy-form ref="groupForm" :dialog="groupDialog" @add="add" @set="edit" />
            <zy-form ref="companyForm" :dialog="companyDialog" @add="add" @set="edit" />
            <zy-form ref="factoryForm" :dialog="factoryDialog" @add="add" @set="edit" />
            <zy-form ref="zoneForm" :dialog="zoneDialog" @add="add" @set="edit" />
        </div>
    </div>
</template>
<script>
import { requestApi } from '@/requset/api'
import { config, column } from './formConfig.js'
import BasicManage from '@/components/basic/BasicManage.vue'
import { mapState } from 'vuex'
import { deepClone } from '@/plugins/clone'
export default {
    extends: BasicManage,
    data() {
        return {
            table_title: '总区域',
            url: 'backstage',
            confirmText: '确认删除此区域?本次操作会清空该区域下所有区域、设备、测点',
            expand: false,
            show: true,
            groupDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入集团名称',
                        label: '集团名称',
                        required: true,
                    },
                    {
                        name: 'proj_no',
                        type: 'input',
                        placeholder: '请输入数据库编号',
                        label: '数据库编号',
                        required: true,
                    },
                ],
                form: {
                    type: 'group',
                    proj_no: '0001',
                },
                title: '集团',
                labelWidth: '120px',
            },
            companyDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入公司名称',
                        label: '公司名称',
                        required: true,
                    },
                ],
                form: {
                    type: 'company',
                },
                title: '公司',
                labelWidth: '120px',
            },
            factoryDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入工厂名称',
                        label: '工厂名称',
                        required: true,
                    },
                    {
                        name: 'address',
                        type: 'cascader',
                        placeholder: '请选择地址',
                        label: '地址',
                        checkStrictly: true,
                        required: true,
                    },
                    {
                        name: 'factory_img',
                        type: 'image',
                        label: '工厂图片',
                    },
                ],
                form: {
                    type: 'factory',
                },
                title: '工厂',
                labelWidth: '120px',
            },
            zoneDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入区域名称',
                        label: '区域名称',
                        required: true,
                    },
                    {
                        name: 'x_per',
                        type: 'input',
                        placeholder: '请输入X轴位置',
                        label: 'X轴位置(单位:%)',
                    },
                    {
                        name: 'y_per',
                        type: 'input',
                        placeholder: '请输入Y轴位置',
                        label: 'Y轴位置(单位:%)',
                    },
                ],
                form: {
                    type: 'zone',
                },
                title: '区域',
                labelWidth: '120px',
            },
            cityList: [],
        }
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'backstageList', 'eigenvalueTags', 'sensorType', 'sys_eig']),
        operate() {
            return parseInt(sessionStorage.getItem('operate')) === 1
        },
    },
    methods: {
        isExpand() {
            this.show = false
            this.expand = !this.expand
            this.$nextTick(() => {
                this.show = true
            })
        },
        handleAdd(type, parent) {
            if (type === 'factory') {
                this.showw(true)
            }
            this[type + 'Dialog'].form.parent = parent
            this.$refs[type + 'Form'].openDialog('add')
        },
        showw(is) {
            if (is) {
                this.factoryDialog.config = [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入工厂名称',
                        label: '工厂名称',
                        required: true,
                    },
                    {
                        name: 'address',
                        type: 'cascader',
                        placeholder: '请选择地址',
                        label: '地址',
                        checkStrictly: true,
                        required: true,
                        options: this.cityList,
                    },
                    {
                        name: 'factory_img',
                        type: 'image',
                        label: '工厂图片',
                    },
                ]
            } else {
                this.factoryDialog.config = [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入工厂名称',
                        label: '工厂名称',
                        required: true,
                    },
                    {
                        name: 'factory_img',
                        type: 'image',
                        label: '工厂图片',
                    },
                ]
            }
        },
        add(data) {
            requestApi('post', this.url + '/add', this.to(deepClone(data))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.getlist()
                    this.$refs[data.type + 'Form'].closeDialog()
                }
            })
        },
        edit(data) {
            requestApi('post', this.url + '/edit', this.to(deepClone(data))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.getlist()
                    this.$refs[data.type + 'Form'].closeDialog()
                }
            })
        },
        from(data) {
            data.parent = data.pid
            data.name = data.label
            data.id = data.value
            delete data.pid
            delete data.label
            delete data.value
            return data
        },
        getlist() {
            this.$EventBus.$emit('undateBackstageTreeList')
        },
        gcityList() {
            requestApi('get', 'backstage/city/area/list').then((res) => {
                if (res.data.success) {
                    this.cityList = res.data.data
                } else {
                    this.cityList = []
                }
            })
        },
    },
    created() {
        this.gcityList()
        column[column.length - 1].buttons = [
            {
                text: '添加',
                click: (val) => {
                    let dirc = {
                        group: 'company',
                        company: 'factory',
                        factory: 'zone',
                    }
                    this.handleAdd(dirc[val.type], val.value)
                },
                icon: 'el-icon-plus',
                if: (val) => val.type !== 'zone',
            },
            {
                text: '编辑',
                click: (val) => {
                    if (val.type === 'factory') {
                        this.showw(false)
                    }
                    this[val.type + 'Dialog'].form = this.from(deepClone(val))
                    this.$refs[val.type + 'Form'].openDialog('change')
                },
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => {
                    val.id = val.value
                    this.delete(val)
                },
                icon: 'el-icon-delete',
            },
        ]
        column[column.length - 1].if = this.operate
        this.tableColumn = column
    },
}
</script>
